/**
 * webpack 默认只能够打包以 .js 后缀名结尾的文件（模块），其它非以 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错
 * less-loader 可以打包 .less 相关的文件
 * sass-loader 可以打包 .scss 相关的文件
 * url-loader  可以打包处理 css中与url相关路径的文件 
 * style-loader css-loader 可以打包处理 .css 相关的文件
 * 
 * 配置 postCSS 自动添加 css 的兼容前缀
 */

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new htmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
});
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    /**
       mode 用来指定构建模式 两个选项， development production
       在webpack 4.X以上
            默认的打包文件的入口为  src/index.js
            默认的输出文件路径为    dist/main.js
       如果要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置
            const path = require('path');
            module.exports = {
                entry : path.join(__dirname,'./src/index.js'),
                output : {
                    path : path.join(__dirname,'./dist'),
                    filename : 'bundle.js'
                }
                
            }
     */
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [htmlPlugin, new VueLoaderPlugin()],
    module: {
        rules: [
            //处理 css 文件打包的加载器，加载器的顺序不能乱写
            //加载器是按照顺序调用（从后往前调用，css-loader->style-loader）
            // postcss-loader 是处理兼css的部分兼容问题
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            //处理 less 文件打包的加载器
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            //处理 scss 文件打包的加载器
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            //处理图片相关的加载器， limit 是用来指定图片大小的，单位是 byte ，只有小于 limit 大小的图片，才会被转换为 base64 图片
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2/,
                use: ['url-loader?limit=700000']
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    }
}